import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

class ListViewTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
//ListView.builder适合列表项比较多的（或者无限）的情况，因为只有子组件真正显示的时候才会被创建，也就是说通过该构造函数构建的ListView
//是支持基于Sliver的懒加载模型的
    return ListView.builder(
        //列表项的数量，如果其值为null，则为无限列表
        itemCount: 100,
        itemExtent: 50.0, //强制高度为50.0
        //列表项的构造器，类型为IndexedWidgetBuilder，返回值为一个Widget，当列表滚到具体的index位置时，会调用该构建器构建列表项
        itemBuilder: (BuildContext context, int index) {
          return ListTile(title: Text("$index"));
        });
  }
}

class ListViewTestRoute2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //下划线Widget预定义以供复用
    Widget divider1 = Divider(color: Colors.blue);
    Widget divider2 = Divider(color: Colors.red);
    return ListView.separated(
        itemCount: 100,
        //分割器构造器
        separatorBuilder: (BuildContext context, int index) {
          return index % 2 == 0 ? divider1 : divider2;
        },
        //列表项构造器
        itemBuilder: (BuildContext context, int index) {
          return ListTile(title: Text("$index"));
        });
  }
}

class InfiniteListView extends StatefulWidget {
  // @override
  // _InfiniteListViewState createState() =>new _InfiniteListViewState();

  @override
  _InfiniteListViewState createState() {
    //这里要写return，不然报错找不到方法
    return new _InfiniteListViewState();
  }
}

class _InfiniteListViewState extends State<InfiniteListView> {
//表尾标记
  static const loadingTag = "##loading##";

  var _words = <String>[loadingTag];

  @override
  void initState() {
    super.initState();
    _retrieveData();
  }

  

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: _words.length,
     
      //列表项构造器
      itemBuilder: (context, index) {
        //如果到了表尾
        if (_words[index] == loadingTag) {
          //不足100条，继续获取数据
          if (_words.length - 1 < 100) {
//获取数据
            _retrieveData();

//加载时显示loading
            return Container(
              padding: const EdgeInsets.all(16.0),
              alignment: Alignment.center,
              child: SizedBox(
                width: 24.0,
                height: 24.0,
                child: CircularProgressIndicator(strokeWidth: 2.0),
              ),
            );
          } else {
            //已经加载了100条数据，不在获取数据
            return Container(
                padding: const EdgeInsets.all(16.0),
                alignment: Alignment.center,
                child: Text("没有更多了", style: TextStyle(color: Colors.grey)));
          }
        }
        return ListTile(title: Text(_words[index]));
      },
       //分割器构造器
      separatorBuilder: (context, index)=>Divider(height: .0),
      );

      
  }
  void _retrieveData() {
    Future.delayed(Duration(seconds: 2)).then((e) {
      _words.insertAll(_words.length - 1,
          generateWordPairs().take(20).map((e) => e.asPascalCase).toList());
      setState(() {
        //重新构建列表
      });
    });
  }
}
